<!doctype html>
<html>
{% include head.html %}

<body>
  {% include header.html %}

  <section id="main" class="modulesMain">
    <div id="sideNavigation">
      <div class="side-nav">
        <div class="categoriesArea">
          <i class="fas fa-tag"></i>

          <select class="form-control" name="choices-multiple-remove-button" id="choices-multiple-remove-button" placeholder="Labels" multiple>
          </select>
        </div>

        <div class="searchArea">
          <div class="search">
            <label>
              <svg height="28px" width="28px" version="1.1" viewBox="0 2 30 30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title />
                <desc />
                <defs />
                <g fill="none" fill-rule="evenodd" id="zoom" stroke="none" stroke-width="1">
                  <g fill="#929292" id="icon-zoom">
                    <path
                      d="M19.4271164,21.4271164 C18.0372495,22.4174803 16.3366522,23 14.5,23 C9.80557939,23 6,19.1944206 6,14.5 C6,9.80557939 9.80557939,6 14.5,6 C19.1944206,6 23,9.80557939 23,14.5 C23,16.3366522 22.4174803,18.0372495 21.4271164,19.4271164 L27.0119176,25.0119176 C27.5621186,25.5621186 27.5575313,26.4424687 27.0117185,26.9882815 L26.9882815,27.0117185 C26.4438648,27.5561352 25.5576204,27.5576204 25.0119176,27.0119176 L19.4271164,21.4271164 L19.4271164,21.4271164 Z M14.5,21 C18.0898511,21 21,18.0898511 21,14.5 C21,10.9101489 18.0898511,8 14.5,8 C10.9101489,8 8,10.9101489 8,14.5 C8,18.0898511 10.9101489,21 14.5,21 L14.5,21 Z"
                      id="search" />
                  </g>
                </g>
              </svg>
              <input type="search" placeholder="Search" onInput="onSearch(event)" />
            </label>
          </div>
        </div>

        <div class="modulesList" id="modulesList">
          <ul id="menu">
            {% for module in site.modules %}
            <li>
              <a href="{{ site.url }}{{ site.baseurl }}{{ module.url}}" onclick="fetchModule(event, '{{ site.url }}{{ site.baseurl }}{{ module.url}}', '{{ module.title }}')" {% if module.url == page.url  %} class="current" {% endif %}>
                {{ module.name }}
              </a>
              <span class="hidden">{{ module.category }}</span>
              <script>
                addToTags('{{ module.category }}')
              </script>
            </li>
            {% endfor %}
          </ul>
        </div>

      </div>
    </div>

    <div id="algoDisplay">
      {{ content }}
    </div>
  </section>

  <script src="{{ site.url }}{{ site.baseurl }}/js/openNav.js"></script>
  <script src="{{ site.url }}{{ site.baseurl }}/js/choices.js"></script>
  <script src="{{ site.url }}{{ site.baseurl }}/js/donate.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
        choices: tags,
        removeItemButton: true,
        duplicateItemsAllowed: false,
        paste: false,
        position: 'below:'
      });

      const choices = document.getElementById('choices-multiple-remove-button')
      const placeholder = document.getElementsByClassName('choices__input')

      choices.addEventListener('change', toggleTags)

      choices.addEventListener('addItem', function(event) {
        if (multipleCancelButton.getValue(true).length > 0)
          placeholder[1].style.setProperty('display', 'none');
      }, false);

      choices.addEventListener('removeItem', function(event) {
        if (multipleCancelButton.getValue(true).length === 0)
          placeholder[1].style.setProperty('display', '');
      }, false);

    });

    if (!history.state) {
      const url = window.location.href
      const title = '{{ page.title }}'
      history.pushState({
        url: url,
        title: title
      }, title, url)
    }
  </script>
</body>

</html>
